<template>
	<view>
		<uni-popup :safe-area="false" ref="popupRef" background-color="#fff">
			<view class="my_popub_box">
				<scroll-view 
					scroll-y="true" 
					class="pupub_scroll_y">
						<view class="my_popub_item" v-for="(item,index) in slotsNums" :key="index">
							<slot :name="`${item}`"></slot>
						</view>	
					</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {ref, watch} from 'vue'
	
	import {dynamicStyleStore} from '@/stores/dynamicStyle.js'
	
	const dynamicStyle_store = dynamicStyleStore()
	
	const {
		primary_text_color,
		primary_border_color
	} = dynamicStyle_store.globalStyle
	
	const popupRef=ref()
	
	const props = defineProps({
		isOpenPopub:{
			type:Number
		},
		slotsNums:{
			type:Number
		},
		height:{
			type:String
		},
		itemPadding:{
			type:String,
			default:'35rpx'
		}
	})
	
	watch(()=>props.isOpenPopub,()=>{
		if(props.isOpenPopub>0){
			popupRef.value.open('bottom')
		}else{
			popupRef.value.close()
		}
	})
</script>

<style lang="less">
	.my_popub_box{
		width: 100%;
		max-height: v-bind(height);
		display: grid;
		grid-template-rows: repeat(v-bind(slotsNums),1fr);
		.pupub_scroll_y {
			max-height: v-bind(height);
		}
		.my_popub_item{
			padding: v-bind(itemPadding);
			border-bottom: 1rpx solid v-bind(primary_border_color);
			display: flex;
			justify-content: center;
			align-items: center;
			color: v-bind(primary_text_color);
		}
		.my_popub_item:last-child{
			border-bottom: 0rpx;
		}
		// .my_popub_item:hover{
		// 	background-color: #e1e7eb;
		// 	color: #3B4F68;
		// }
	}
</style>